<template>
  <div class="agreement-page">

    <div class="content" >
      <div class="header">
        <h1 class="title">用户协议</h1>
        <div class="update-time">更新时间：2025年8月1日</div>
      </div>

      <div class="agreement-content">
        <section class="section">
          <h2 style="text-align: center;margin-bottom: 20rpx;">外卖小程序用户协议</h2>
          <p style="text-indent: 2em;">欢迎使用本外卖小程序（以下简称 “本程序”）。请您在使用前仔细阅读本协议，一旦您使用本程序，即视为您已同意本协议全部内容。</p>
        </section>

        <section class="section">
          <h2>一、用户基本规范</h2>
          <p style="text-indent: 2em;">您需提供真实、准确的个人信息（如姓名、联系方式、收货地址等），若信息发生变更，应及时更新。因信息不实或未及时更新导致的问题，由您自行承担责任。</p>
          <p style="text-indent: 2em;">您应妥善保管自己的账号及密码，不得将账号转借或泄露给他人。如因账号被盗用等非本程序原因造成损失，本程序不承担责任。</p>
        </section>

        <section class="section">
          <h2>二、服务内容与规则</h2>
          <p style="text-indent: 2em;">本程序为您提供外卖订购服务，您可在程序内浏览商家信息、下单购买商品。</p>
          <p style="text-indent: 2em;">下单后，您应按照订单金额及时支付款项。支付成功后，订单生效，商家将按照约定提供商品及配送服务。</p>
          <p style="text-indent: 2em;">若您需要取消订单，应按照本程序及商家的相关规则操作。因取消订单产生的费用或损失，按相应规则处理。</p>
        </section>

        <section class="section">
          <h2>三、双方权利与义务</h2>
          <p style="text-indent: 2em;">您有权要求本程序及商家提供符合约定的商品和服务，对服务过程中存在的问题可向本程序反馈。</p>
          <p style="text-indent: 2em;">本程序有权对商家信息进行审核和管理，对违规商家采取相应措施；同时，有权根据实际情况调整服务规则，并通过程序公告等方式告知您。</p>
        </section>

        <section class="section">
          <h2>四、责任限制</h2>
          <p style="text-indent: 2em;">因不可抗力（如自然灾害、交通管制等）导致服务无法正常提供的，本程序及商家不承担责任，但会尽力协助解决问题。</p>
          <p style="text-indent: 2em;">本程序仅为交易平台，不对商家提供的商品质量、口感等承担直接责任。若您对商品有异议，可与商家协商，本程序会提供必要的协助。</p>
        </section>

        <section class="section">
          <h2>五、其他</h2>
          <p style="text-indent: 2em;">本协议的解释权归本程序所有。</p>
          <p style="text-indent: 2em;">若您与本程序或商家发生争议，应友好协商解决；协商不成的，可向本程序所在地有管辖权的法院提起诉讼。</p>
        </section>
        <section class="section">
          <p style="text-indent: 2em;text-align: end;">长沙市简凡科技有限公司</p>
          <p style="text-indent: 2em;text-align: end;">2025年8月1日</p>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Return from '@/components/Return.vue'

const capsuleTop = ref(0)

const calcCapsuleTop = () => {
  // #ifdef MP-WEIXIN
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
  capsuleTop.value = menuButtonInfo.bottom + 20
  // #endif
}

onMounted(() => {
  calcCapsuleTop()
})
</script>

<style lang="scss" scoped>
.agreement-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.content {
  padding: 0 40rpx 40rpx;
}

.header {
  text-align: center;
  padding: 40rpx 0;
  background: white;
  margin-bottom: 20rpx;
  border-radius: 16rpx;

  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #191919;
    margin-bottom: 16rpx;
  }

  .update-time {
    font-size: 24rpx;
    color: #999;
  }
}

.agreement-content {
  background: white;
  border-radius: 16rpx;
  padding: 40rpx;

  .section {
    margin-bottom: 40rpx;
    text-align: justify;

    &:last-child {
      margin-bottom: 0;
    }

    h2 {
      font-size: 32rpx;
      font-weight: bold;
      color: #191919;
      margin-bottom: 20rpx;
    }

    p {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    ul {
      padding-left: 32rpx;

      li {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 12rpx;
        list-style: disc;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
